<template>
	<!-- <a-spin :spinning="spinning" size="large"> -->
    <div class="loves-result" ref="imageDom"
        :style="{width: modelWidth =='320'?pageWidth:pageWidthPc, height: modelWidth =='320'?pageHeight:pageHeightPc,transform:modelWidth =='320'?'translate3d(-50%,-50%,0) rotate('+rotate+')':''}"
    >
        <div class="left-result" v-if="personData && personData.second">
            <div class="name">{{personData.second.familyName}}{{personData.second.realName}}</div>
            <!-- <div class="f-name">{{personData.second.familyName}}</div> -->
            <div class="f-name" 
				v-for="(item, index) in onStringSplit(personData.second.familyName)" 
				:key="'familyName'+index"
            >{{item}}</div>
			<div class="des-box">
                <div class="f-info">
                    <div class="tit">
                        <i></i>姓氏介绍
                    </div>
                    <div class="content">
                        <p v-if="personData.second.familyNameDescription">{{personData.second.familyNameDescription}}</p>
                        <p v-else>数据暂未收录</p>
                    </div>
                </div>
                <div class="f-info">
                    <div class="tit">
                        <i></i>家规家训
                    </div>
                    <div class="content">
                        <p v-if="personData.second.roleContent">{{personData.second.roleContent}}</p>
                        <p v-else>数据暂未收录</p>
                        <!-- <p>一、愛人者人恆愛之，敬人者人恆敬之。我惡人人亦惡我，我慢人人亦慢我，此感應自然之理。切不可結怨於人，結怨於人辟如服毒，其毒日久必發，但有小大遲速不同耳。人家祖宗受人欺侮，其子孫傳説不忘，乘時遘會，終須報之。彼我同然，出爾反爾，豈可不戒也？</p>
                        <p>二、臨事讓人一步自有餘地，臨財放寬一分自有餘味。待人接物要看自己地步，若自己勝人一分，切宜自下一分，使不得一毫氣概。若自己遜人一分，切宜自重一分，使不得一毫諂侫。</p>
                        <p>板村蔡氏义派支譜</p> -->
                    </div>
                </div>
            </div>
        </div>

        <div class="right-result" v-if="personData && personData.first">
            <div class="name">{{personData.first.familyName}}{{personData.first.realName}}</div>
            <!-- <div class="f-name">{{personData.first.familyName}}</div> -->
			<div class="f-name"
				v-for="(item, index) in 
					onStringSplit(personData.first.familyName, true)" 
				:key="'familyName'+index"
			>{{item}}</div>
            <div class="des-box">
                <div class="f-info">
                    <div class="tit">
                        <i></i>姓氏介绍
                    </div>
                    <div class="content">
                        <p v-if="personData.first.familyNameDescription">{{personData.first.familyNameDescription}}</p>
                        <p v-else>数据暂未收录</p>
                    </div>
                </div>
                <div class="f-info">
                    <div class="tit">
                        <i></i>家规家训
                    </div>
                    <div class="content">
                        <p v-if="personData.first.roleContent">{{personData.first.roleContent}}</p>
                        <p v-else>数据暂未收录</p>
                        <!-- <p>一、愛人者人恆愛之，敬人者人恆敬之。我惡人人亦惡我，我慢人人亦慢我，此感應自然之理。切不可結怨於人，結怨於人辟如服毒，其毒日久必發，但有小大遲速不同耳。人家祖宗受人欺侮，其子孫傳説不忘，乘時遘會，終須報之。彼我同然，出爾反爾，豈可不戒也？</p>
                        <p>二、臨事讓人一步自有餘地，臨財放寬一分自有餘味。待人接物要看自己地步，若自己勝人一分，切宜自下一分，使不得一毫氣概。若自己遜人一分，切宜自重一分，使不得一毫諂侫。</p>
                        <p>板村蔡氏义派支譜</p> -->
                    </div>
                </div>
            </div>
        </div>
        
        <router-link to="/" class="go-home download" id="go-home">首页</router-link>
        <a href="javascript:" class="download displayNone" id="download" @click="download">下载</a>
        <div class="btm">
            <img :src="logo" alt="" class="logo">
            <img :src="mzlogo" alt="" class="mzlogo">
            <a :href="qriously2" class="a1">点击了解更多</a>
            <a :href="qriously1" class="a2">点击了解更多</a>
            <qriously :value="qriously2" :size="100" class="qrcode1"/>
            <qriously :value="qriously1" :size="100" class="qrcode2"/>
            
            <!-- 二维码弹出框 -->
            <a-modal v-model="qrVisible" :footer="null" :mask="false" :width="modelWidth" transitionName="fade">
                <img :src="qriouslySrc2" class="qrcodeModal">
                <img :src="qriouslySrc1" class="qrcodeModal">
            </a-modal>

            <!-- 下载图片弹出框 -->
			<a-modal v-model="downloadVisible" :footer="null" :mask="true" :width="modelWidth" dialogClass="ant-image">
				<h5>长按图片进行更多操作</h5>
				<img :src="downloadImageSrc" class="downloadImageModal">
			</a-modal>
        </div>
    </div>
	<!-- </a-spin> -->
</template>

<script>
    export default {
        data(){
            return{
				spinning: false, // 加载中...
                qrVisible: false,
                downloadVisible: false, // 长按图片遮罩
                pageWidth:'',
                pageHeight:'',
                pageWidthPc:'',
                pageHeightPc:'',
                rotate:'0deg',
                familyName1 : '',
                name1       : '',
                familyName2 : '',
                name2       : '',
                personData  : null, // 人物信息
                qrCode:require('./../../assets/img/qr.png'),
                logo:require('./../../assets/img/logo2.png'),
                mzlogo:require('./../../assets/img/mzlogo.png'),
                qrcodeUrl: 'https://jiapu.library.sh.cn/#/genealogyCenter?familyName=',
                qriouslySrc1: '',
                qriouslySrc2: '',
                downloadImageSrc: '', // 下载时图片
				downScrollX: 0, // 图片截取x轴位置
				downScrollY: 0, // 图片截取y轴位置
                modelWidth: '320'
            }
        },
        computed: {
            params(){
                return {
                    familyName1 : this.familyName1,
                    name1       : this.name1,
                    familyName2 : this.familyName2,
                    name2       : this.name2,
                }
            },
            qriously1(){
                return this.qrcodeUrl + encodeURIComponent(this.familyName1);
            },
            qriously2(){
                return this.qrcodeUrl + encodeURIComponent(this.familyName2);
            }
        },
        created() {
            this.init()
            setInterval(()=>{
                this.init()
            },2000)
        },
        mounted(){
            this.$nextTick(()=>{
                this.getPersonRoles();
                this.onQRCodeImg1(); // 第一个二维码生成
                this.onQRCodeImg2(); // 第二个二维码生成
                setTimeout(() => {
                    this.onQrcode(); // 底部二维码点击
                }, 600);
            })
        },
        methods:{
            init(){
                const fw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
                const fh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
                fw > 1100?this.modelWidth = "75%":this.modelWidth = "320";
                this.pageWidthPc = fw + "px";
                this.pageHeightPc = fh + "px";
                if(fw<fh){
                    this.pageWidth = fh+'px'
                    this.pageHeight = fw+'px'
                    this.rotate = '90deg'
                }else{
                    this.pageWidth = fw+'px'
                    this.pageHeight = fh+'px'
                    this.rotate = '0deg'
                }
            },
            onQrcode(){ // 底部二维码点击
                this.$Jquery('.qrcode1 canvas, .qrcode2 canvas')
                .click(()=>{
                    this.qrVisible = true;
                })
            },
            onQRCodeImg1(){ // 第一个二维码生成
                this.$QRCode.toDataURL(this.qriously1)
                .then(url => {
                    this.qriouslySrc1 = url;
                })
                .catch(err => {
                    console.error(err)
                })
            },
            onQRCodeImg2(){ // 第二个二维码生成
                this.$QRCode.toDataURL(this.qriously2)
                .then(url => {
                    this.qriouslySrc2 = url;
                })
                .catch(err => {
                    console.error(err)
                })
            },
            getRouterParmas(){
                let routerParmas = null;
                let _query = this.$route.query;
                if( !this.isEmptyObject(_query) && !this.isEmpty(_query.tipsLovesParams) ){
                    // routerParmas = JSON.parse(decodeURIComponent(_query.tipsLovesParams));
                    routerParmas = JSON.parse(_query.tipsLovesParams);
                }
                else {
                    routerParmas = JSON.parse(localStorage.tipsLovesParams);
                }
                return routerParmas;
            },
            getPersonRoles(){
                let _routerParmas = this.getRouterParmas();
                this.familyName1  = _routerParmas.familyName1;
                this.name1        = _routerParmas.name1;
                this.familyName2  = _routerParmas.familyName2;
                this.name2        = _routerParmas.name2;
                this.$axios.get(this.$Common.getRoles, {params: this.params})
                .then((res) => {
                    let resultData = res.data;
                    // console.log(resultData);
                    this.personData = resultData.data;
                })
                .catch((err) => {
                    console.log(err)
                });
            },
            download(){
				this.spinning = true; // 加载中...
                if( this.hasScrollbar('.des-box') ) {
                    this.pageWidth  = Number(this.pageWidth.replace('px', '')) * 1.5+'px';
                    this.pageHeight = Number(this.pageHeight.replace('px', '')) * 1.5+'px';
                    this.pageWidthPc  = Number(this.pageWidthPc.replace('px', '')) * 1.2+'px';
                    this.pageHeightPc = Number(this.pageHeightPc.replace('px', '')) * 1.2+'px';
                    this.downScrollX = this.$refs.imageDom.offsetLeft/2;
                    this.downScrollY = this.$refs.imageDom.offsetTop/2;
				}
                this.$nextTick(()=>{
                    this.$Html2canvas(this.$refs.imageDom, {
                        x: 0, // 截取画布x轴坐标
                        y: 0, // 截取画布y轴坐标
                        scrollX: this.downScrollX,
                        scrollY: this.downScrollY,
                        scale: window.devicePixelRatio,
                        taintTest: true,
                        allowTaint: true,
                        useCORS: true,
                        ignoreElements:(element)=>{
                            if(element.id=='download' || element.id=='go-home') return true;
                        }
                    }).then((canvas)=>{
						this.downloadVisible  = true;
						this.downloadImageSrc = canvas.toDataURL('image/png', 1);
                        // this.downloadIamge(canvas.toDataURL('image/png', 1), 'codeImg.png');
						this.spinning = false; // 加载中...
					})
                    .catch((error)=>{
                        this.$mui.toast('图片下载异常!');
                        console.error('图片下载异常!', error);
                    });
                    this.init(); // 样式初始化
                })
            },
            downloadIamge(canvas, name) {
                var alink = document.createElement('a');
                alink.download = name;
                alink.href = canvas;
                alink.target = '_blank';
                if (document.createEvent) {
                    let clickEvent = document.createEvent("MouseEvents");
                    clickEvent.initEvent('click', true, true);
                    alink.dispatchEvent(clickEvent);
                }
                else alink.click();
            },
        }
    }
</script>

<style>
	.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-dot{
		margin: 47vh -16px;
	}
</style>
<style lang="less" scoped>
    /deep/.ant-modal-content{    
        background-color: rgba(255, 255, 255, .9);
    }
    /deep/.ant-modal-body{
        text-align: center;
        .qrcodeModal{
            display: inline-block;
            margin: 0 5%;
        }
        img{
            width: 38%;
			&.downloadImageModal{
				width: 100%;
			}
        }
    }
    @media screen and (orientation:  portrait){
        /deep/.ant-modal{
            transform:rotate(90deg)!important;
            -ms-transform:rotate(90deg)!important; 	    /* IE 9 */
            -moz-transform:rotate(90deg)!important; 	/* Firefox */
            -webkit-transform:rotate(90deg)!important;  /* Safari 和 Chrome */
            -o-transform:rotate(90deg)!important; 	    /* Opera */
            transform-origin: 25% 100%!important;
        }
		/deep/.ant-image{
			transform:none!important;
			-ms-transform:none!important; 	    /* IE 9 */
			-moz-transform:none!important; 	/* Firefox */
			-webkit-transform:none!important;  /* Safari 和 Chrome */
			-o-transform:none!important; 	    /* Opera */
		}
    }
    /deep/.qrcode1{
        line-height: 1.5rem;
        text-align: center;
        width: .7rem;
        height: .7rem;
        float: left;
        canvas{
            position: relative;
            width: 100%;
            height: 100%;
        }
    }
    /deep/.qrcode2{
        line-height: 1.5rem;
        text-align: center;
        width: .7rem;
        height: .7rem;
        float: right;
        canvas{
            position: relative;
            width: 100%;
            height: 100%;
        }
    }
    .loves-result {
        .f-name{
			display: inline-block;
			margin: 0 .5px;
        }
        .btm{
            padding: 0 .4rem;
        }
        .go-home{
            right: 4.3rem;
        }
    }
    @media screen and (min-width: 1100px){
        .loves-result {
            position: absolute;
            top: 0;
            left: 0;
            background-size: 100% 100%;
            background-image: url("../../assets/img/lovesbg_pc.jpg");
            padding: 0.68rem 3.76rem 0 3.73rem;

            // 截屏样式
            &.box-sty {
                .left-result,
                .right-result {
                    .des-box {
                        .f-info {
                            margin-bottom: 0;
                            transform: scale(0.8) translate(-65px, 0px);
                            width: 123%;
                        }
                    }
                }
            }

            .btm {
                position: absolute;
                width: 9rem;
                height: 1.8rem;
                bottom: -0.2rem;
                left: 1.2rem;
                margin-left: 0;
                background-size: 100% 100%;
                padding: 0;

                a {
                    position: absolute;
                    transform: scale(.4);
                    font-size: .5rem;
                    width: 10rem;
                    bottom: -.25rem;
                    color: #000;

                    &.a1 {
                        left: -2.8rem;
                    }

                    &.a2 {
                        right: -5.6rem;
                    }
                }

                .qrcode1 {
                    line-height: 0;
                    text-align: center;
                    width: 0.6rem;
                    height: 0.6rem;
                    float: left;
                    position: relative;
                    top: 0.55rem;
                    left: 0.52rem;
                }

                .qrcode2 {
                    line-height: 0;
                    text-align: center;
                    width: 0.6rem;
                    height: 0.6rem;
                    float: right;
                    position: relative;
                    top: 0.55rem;
                    right: 0.56rem;
                }

                img {
                    position: absolute;

                    &.qr2 {
                        width: .6rem;
                        height: .6rem;
                        right: .45rem;
                        top: .3rem;
                    }

                    &.qr1 {
                        width: .6rem;
                        height: .6rem;
                        left: 0.4rem;
                        top: .3rem;
                    }

                    &.logo {
                        width: 1.84rem;
                        height: 0.74rem;
                        left: 2.5rem;
                        top: 0.5rem;
                    }

                    &.mzlogo {
                        width: 0.97rem;
                        height: 1.13rem;
                        left: 5.3rem;
                        top: .2rem;
                    }
                }
            }

            a.download {
              position: absolute;
              right: 3.7rem;
              bottom: 0.6rem;
              width: 1.4rem;
              height: 0.32rem;
              line-height: 0.3rem;
              font-size: 0.16rem;
            }

            .go-home {
                right: 5.5rem !important;
            }

            .left-result,
            .right-result {

                .des-box {
                    position: absolute;
                    top: 1.2rem;
                    right: 0;
                    bottom: 1.24rem;
                    left: 0;
                    overflow: auto;

                    .f-info {
                        margin-bottom: .3rem;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .content {
                            line-height: 1.8;
                            margin-top: .16rem;
                            padding-left: .37rem;
                            color: #000;

                            p {
                                margin: 0;
                                text-indent: 2em;
                                color: #000;
                                font-size: 16px;
                            }
                        }

                        .tit {
                            font-size: 0.2rem;
                            font-weight: bold;
                            color: #a50319;
                            display: flex;
                            align-items: center;
                            width: 100%;

                            i {
                                width: .25rem;
                                height: .24rem;
                                background-size: 100% 100%;
                                margin-right: .11rem;
                            }
                        }
                    }
                }

                .name {
                    font-size: 0.24rem;
                    font-weight: bolder;
                    line-height: 1;
                    position: absolute;
                    top: 0.66rem;
                    right: 0;
                }

                .f-name {
                    // position: absolute;
                    position: relative;
                    width: 0.9rem;
                    height: 0.9rem;
                    text-align: center;
                    line-height: 0.8rem;
                    background-size: 100% 100%;
                    font-size: 0.65rem;
                    top: 0;
                    left: 0;
                }
            }

            .right-result {
                .name {
                    right: inherit;
                    left: 0;
                }

                .f-name {
                    right: 0;
                    left: inherit;
                    float: right;
                }
            }

        }
    }

    @media screen and (min-width: 980px) and (max-width: 1100px) {
        .loves-result {
            .left-result,
            .right-result {
                transform: rotate(-90deg);
                position: absolute;
                top: 15vh;
                left: 11.5vh;
                width: 70vw;
                height: 30vh;
                overflow: auto;

                .des-box {
                    position: inherit;
                    top: 1.5rem;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    .f-info {
                        margin-bottom: .3rem;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        .content {
                            color: #fff;
                            line-height: 1.8;
                            padding-left: 0.35rem;

                            p{
                                font-size: 16px;
                            }
                        }

                        .tit {
                            font-size: .3rem;

                            i {
                                width: 0.4rem;
                                height: 0.4rem;
                                margin-left: 0;
                                margin-right: 0.11rem;
                            }
                        }
                    }
                }

                .name {
                    top: 0;
                }

                .f-name {
                    width: 0.9rem;
                    height: 0.9rem;
                    line-height: 0.8rem;
                    font-size: 0.65rem;
                }
            }

            .right-result {
                left: 41vh;

                .name {
                    top: 0;
                    right: 0;
                    left: initial;
                }
                .f-name{
                    float: left;
                    left: 0;
                }
            }

            .btm {
                transform: rotate(-90deg);
                bottom: 45%;
                left: 94%;

                .qrcode1,
                .qrcode2 {
                    line-height: 1.98rem;
                }
            }

            .go-home {
                transform: rotate(-90deg);
                font-size: 20px;
                height: 0.8rem;
                line-height: 0.7rem;
                right: 1.8rem !important;
                bottom: 11.5rem;
            }
            .displayNone {
                display: none;
            }
        }
    }
</style>